/* eslint-disable react/sort-comp */
/**
 * 多tab页 集成bootstarp
 */
import { h, Component } from 'preact';
import TabContent from './TabContext';
import Panel from './Panel';
import NavTab from './NavTab';
import classNames from 'classnames';

class TabContainer extends Component {

	constructor(props) {
		super(props);
		this.state = {
			active: props.defaultActive
		};
	}

	componentDidMount() {

	}

    onChange = (k) => {
    	this.setState({ active: k });
    }
	
    render(props,state) {

    	const { children,className,style } = props;
    	return (
    		<div className={classNames('card',className)} style={style}>
    			<TabContent.Provider value={{ onChange: this.onChange, ...this.state }}>
    				<div className="card-header">
    					<ul class="nav nav-tabs card-header-tabs">
    						{children.map((child,index) => {
    							const childProps = { ...child.props };
    							delete childProps.disabled;
    							delete childProps.tabClassName;
    							return <NavTab {...childProps} />;
    						})}
    					</ul>
    				</div>
    				<div className="card-body">
    					{children.map(child => {
    						const childProps = { ...child.props };
    						delete childProps.title;
    						delete childProps.disabled;
    						delete childProps.tabClassName;
    						return <Panel {...childProps} />;
    					})}
    				</div>
    			
    			</TabContent.Provider>
    		</div>
    	);
    }
}

TabContainer.propTypes = {

};

TabContainer.defaultProps = {
	active: 1
};
 
TabContainer.Panel = Panel;
export default TabContainer;
